<template>
    <div>
        <div class="layout-content-breadcrumb">
            <Breadcrumb>
                <Breadcrumb-item>人工咨询管理</Breadcrumb-item>
                <Breadcrumb-item>用户人工咨询</Breadcrumb-item>
            </Breadcrumb>
        </div>
        <div class="page-content">
            <Table :columns="columns" :data="dataSource"></Table>
            <div class="table-paging">
                <Page :total="totalNumber" :current="page" :page-size="pageSize" show-total
                      @on-change="onPageChange"></Page>
            </div>
        </div>
        <Modal
                v-model="replyModal.showModal"
                title="回复"
                @on-ok="onSureReply">
            <Input type="textarea" v-model="replyModal.content" placeholder="请输入回复内容">
            </Input>
        </Modal>
        <Modal
                v-model="replyLog.showModal"
                title="回复记录">
            <Table :columns="replyLog.columns" :data="replyLog.dataSource"></Table>
        </Modal>
        <div id="layover" class="layover" v-show="showBigImg.show" @click="showBigImg.show=false">
            <img :src="showBigImg.src" alt="大图" @click.stop="">
        </div>
    </div>
</template>
<style lang="less">
    .layover {
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        background-color: rgba(0, 0, 0, .5);
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        img {
            max-width: 100%;
            height: auto;
        }
    }
</style>
<script>
    import api from 'service/consult'
    export default{
        data(){
            return {
                page: 1,
                pageSize: 10,
                totalNumber: 0,
                search: {
                    complaint_target: ''
                },
                showBigImg: {
                    show: false,
                    src: ''
                },
                replyLog:{
                    showModal:false,
                    columns:[
                        {
                            title: '回复内容',
                            key: 'content'
                        },
                        {
                            title: '回复时间',
                            key: 'created_at'
                        }
                    ],
                    dataSource:[]
                },
                columns: [
                    /*{
                        title: '头像',
                        key: 'headImg',
                        render: (h, params) => {
                            return h('img', {
                                attrs: {
                                    src: params.row.headImg,
                                    alt: params.row.nickname,
                                },
                                style: {
                                    width: '80px',
                                    height: '80px',
                                    margin: '5px 0'
                                }
                            })
                        }
                    },*/
                    {
                        title: '昵称',
                        key: 'nickname'
                    },
                    {
                        title: '消息内容',
                        key: 'content',
                        render: (h, params) => {
                            let type = params.row.type
                            let that = this
                            if (type === 'text') {
                                return params.row.content
                            }
                            if (type === 'image') {
                                return h('img', {
                                    attrs: {
                                        src: params.row.content,
                                        alt: '图片',
                                    },
                                    style: {
                                        width: '50px',
                                        height: '50px',
                                        cursor: 'pointer'
                                    },
                                    on: {
                                        click(){
                                            that.onShowBigImg(params.row.content)
                                        }
                                    }
                                })
                            }
                            if (type === 'voice') {
                                let id = 'audio' + params.index
                                let tag = ''
                                if (params.row.isPlay) {
                                    tag = h('div',{
                                        on: {
                                            click:()=>{
                                                params.row.isPlay = false
                                                document.getElementById(id).pause()
                                            }
                                        }
                                    },[
                                        h('Icon', {
                                            props:{
                                                type:'ios-pause',
                                                size:'32'
                                            },
                                            style:{
                                                cursor:'pointer'
                                            }
                                        })
                                    ])
                                } else {
                                    tag = h('div',{
                                        on: {
                                            click:()=>{
                                                that.dataSource=that.dataSource.map(item => {
                                                    item.isPlay = false
                                                    return item
                                                })
                                                let audios = document.getElementsByTagName('audio')
                                                for (let i = 0; i < audios.length; i++) {
                                                    if(i!==params.index) audios[i].pause()
                                                }
                                                params.row.isPlay = true
                                                that.dataSource[params.index]=params.row
                                                //console.log(that.dataSource.map(item=>item.isPlay))
                                                setTimeout(()=>{
                                                    document.getElementById(id).play()
                                                },0)
                                            }
                                        }
                                    },[
                                        h('Icon', {
                                            props:{
                                                type:'ios-play',
                                                size:'32'
                                            },
                                            style:{
                                                cursor:'pointer'
                                            }
                                        })
                                    ])
                                }
                                return h('div',[
                                    h('audio', {
                                        attrs: {
                                            id: id,
                                            src: params.row.content
                                        }
                                    }, '您的浏览器不支持语音播放，请升级浏览器'),
                                    tag
                                ])
                            }
                        }
                    },
                    {
                        title: '时间',
                        key: 'created_at'
                    },
                    {
                        title: '回复状态',
                        key: 'status',
                        render: (h, params) => {
                            return params.row.status == '0' ? '未回复' : params.row.status == '1' ? '已回复' : '结束咨询'
                        }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.onReply(params.row.msgId)
                                        }
                                    }
                                }, '回复'),
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.onShowReplyLog(params.index)
                                        }
                                    }
                                }, '回复记录')
                            ]);
                        }
                    }
                ],
                dataSource: [],
                replyModal: {
                    showModal: false,
                    msgId: '',
                    content: ''
                }
            }
        },
        mounted(){
            this.onPageChange(1)
        },
        beforeDestroy(){
            clearInterval(this.clearInter)
        },
        methods: {
            onLoadNew(){
                this.msgCount = 0
                this.onPageChange(1)
            },
            onReply(msgId){
                this.replyModal.msgId = msgId
                this.replyModal.showModal = true
                this.replyModal.content = ''
            },
            onShowBigImg(src){
                let layover = document.getElementById('layover')
                let body = document.getElementsByTagName('body')[0]
                body.appendChild(layover)
                this.showBigImg.src = src
                this.showBigImg.show = true
            },
            onSureReply(){
                let content = this.replyModal.content.trim()
                if (!content) {
                    return this.$Message.warning('内容不能为空')
                }
                api.reply({
                    msg_id: this.replyModal.msgId,
                    msg_type: 'text',
                    content: content
                }).then(() => {
                    this.$Message.info('回复成功')
                    this.onPageChange(this.page)
                    this.replyModal.showModal = false
                })
            },
            onShowReplyLog(index){
                this.replyLog.showModal=true
                this.replyLog.dataSource=this.dataSource[index].reply.map(item=>{
                    return {
                        content:item.msg.text.content,
                        created_at:item.created_at
                    }
                })
            },
            onPageChange(page){
                this.page = page
                api.userMsgDetail({
                    page: page,
                    per_page: this.pageSize,
                    customer_id:this.$route.params.id,
                    sort:'id',
                    order:'asc'
                }).then(({data}) => {
                    this.dataSource = this.formatData(data.list || [])
                    this.totalNumber = Number(data.total_count)
                })
            },
            formatData(items){
                return items.map(item => {
                    let content = ''
                    let type = item.msg.MsgType
                    if (item.msg) {
                        if (type === 'text') {
                            content = item.msg.Content
                        } else if (type === 'image') {
                            content = item.msg.PicUrl
                        } else if (type === 'voice') {
                            content = item.qiniu_media_url//'http://www.w3school.com.cn/i/horse.ogg'
                        }
                    }
                    return {
                        type: type,
                        msgId: item.id,
                        headImg: item.customer.avatar,
                        nickname: item.customer.nick,
                        content: content,
                        created_at: item.created_at,
                        status: item.status,
                        isPlay: false,
                        reply:item.reply
                    }
                })
            }
        }
    }
</script>